/**
 * Created by apple on 2017/6/26.
 */
import React, {Component, PropTypes} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Platform,
  StatusBar,
} from "react-native";

const NAV_BAR_HEIGHT_ANDROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
const STATUS_BAR_HEIGHT = 20;
//为StatusBarShape设置一个图形，这样可以提取出来在外面写
const StatusBarShape = {
  backgroundColor:PropTypes.string,
  barStyle:PropTypes.oneOf(["default",'light-content','dark-content']),
  hidden:PropTypes.bool
};
export default class Navigation extends Component {
  //static 为类的属性，只有这个类才能调用
  static propTypes = {
    style: View.propTypes.style,
    title: PropTypes.string,
    titleView: PropTypes.element,
    hide: PropTypes.bool,
    leftButton: PropTypes.element,
    rightButton: PropTypes.element,
    statusBar:PropTypes.shape(StatusBarShape)
  };
  //此处设置最顶部的颜色，不是白的就是黑的
  static defaultProps={
    statusBar:{
      barStyle:"light-content",
      hidden:false
    }
  };
  //props表示从父组件中获取数据
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      hide: false
    }


  };

  render() {
    let status = <View style={[styles.statusBar]}>
      <StatusBar {...this.props.statusBar}/>
    </View>;
    let titleView = this.props.titleView ? this.props.titleView : <Text style={{color:'#fff',fontSize:16}}>{this.props.title}</Text>;
    let content = <View style={styles.navBar}>
      {this.props.leftButton}
      <View style={styles.titleViewContainer}>
        {titleView}
      </View>
      {this.props.rightButton}
    </View>;
    return (
      <View style={[styles.container,this.props.style]}>
        {status}
        {content}
      </View>
    )
  };
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#2196f3'
  },
  navBar: {
    justifyContent: "space-between",
    alignItems: 'center',
    height: Platform.OS === "ios" ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
    flexDirection: 'row'
  },
  titleViewContainer:{
    justifyContent:'center',
    alignItems:"center",
    position:'absolute',
    left:40,
    right:40,
    top:0,
    bottom:0,
  },
  statusBar:{
    height:Platform.OS === "ios"?STATUS_BAR_HEIGHT:0
  }
});